<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<alert-com :html="content"></alert-com>
			<!-- slot里面的内容变量只与父元素有关 -->
			<alert-com1>
				<p>小心小心再小心</p>
			</alert-com1>
		</div>

		<script type="text/javascript">
			Vue.component('alert-com',{
				props:['html'],
				template:`
				<div class="alert">
					<h1>温馨提示：</h1>
					<div id="">
						{{html}}
					</div>
				</div>`,
			});
			
			Vue.component('alert-com1',{
				template:`
				<div class="alert">
					<h1>温馨提示：</h1>
					<div id="">
						<slot></slot>
					</div>
				</div>`,
			});
			
			var app = new Vue({
				el:"#app",
				data:{
					content:"小心熊出没"
				},
			})
		</script>
	</body>
</html>
